<@override name="head"> 
<#include "/inc/include-easyUI-css.html"/>
<link rel="stylesheet" type="text/css" href="${basePath}/static/css/orso.css" />
<style>
.box1, .box2 {
    float: left;
    padding-left: 10px;
    padding-right: 9px;
}
.col-md-5 {
    width: 41.66666667%;
}
.btn-box {
    margin-top: 40px;
    padding: 0;
    float: left;
}
.btn-box .btn {
    margin: 2px;
    padding: 4px 0;
    color: #ddd;
    width: 100%;
    margin-top: 5px;
}
.ace-spinner {
    margin-top: -5px;
}
</style>
</@override> 
<@override name="layout_main_content">
<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">首页</a>
				</li>
				<li><a href="javascript:void(0);">日常消费管理</a></li>
				<li class="active">添加</li>
			</ul>
			<!-- /.breadcrumb -->

			<!-- <div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div> -->
			<!-- /.nav-search -->
		</div>

		<div class="page-content">

			<div class="page-header">
				<h1>
					日常消费信息
					<small> 
						<i class="ace-icon fa fa-angle-double-right"></i> 
					</small>
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					
					<form id="addConsumeInfoForm" class="form-horizontal" role="form" style="margin: 0px;" 
							method="POST" enctype="multipart/form-data">
						<input type="hidden" name="consumeType" value="EVERY_CONSUME"/>
						<input type="hidden" name="payerUserId" value="${activeUser.id }"/>
						<div class="space-12"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="add-consume-pagerUserName"> 付款人：</label>
							<div class="col-sm-5">
								<input type="text" name="pagerUserName" id="add-consume-pagerUserName" class="form-control" 
									value="${activeUser.userName }" readonly="true"/>
							</div>
						</div>
						<div class="space-8"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeItemId"> 消费项目：</label>
							<div class="col-sm-5">
								<input type="text" name="consumeItemId" id="add-consume-consumeItemId" placeholder="消费项目" class="form-control" 
									style="height:30px;width: 450px;"/>
							</div>
						</div>
						<div class="space-8"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeMoney"> 消费金额(￥)：</label>
							<div class="col-sm-5">
								<input type="text" name="consumeMoney" id="add-consume-consumeMoney" placeholder="消费金额" class="form-control" />
							</div>
						</div>
						<div class="space-8"></div>
						<div class="form-group">
							<input type="hidden" name="consumeUserIds" id="add-consume-consumeUserIds"/>
							<label class="col-sm-3 control-label no-padding-top" for="duallist"> 消费人员 </label>
							<div class="col-sm-8" id="select_consumeUser_box">
								<div class="box1 col-sm-4">
									<div class="box_l" style="width: 100%;" id="has_no_select_userList">
									</div>
								</div>
								<div class="btn-box col-sm-1">
									<button type="button" class="btn db-btn move btn-default" title="Move selected" id="move-selected">
										<i class="glyphicon glyphicon-arrow-right"></i>
									</button>
									<button type="button" class="btn db-btn moveall btn-default" title="Move all" id="move-all">
										<i class="glyphicon glyphicon-arrow-right"></i> 
										<i class="glyphicon glyphicon-arrow-right"></i>
									</button>
									<p class="clearfix" style="margin-bottom: 20px"></p>
									<button type="button" class="btn db-btn remove btn-default" title="Remove selected" id="remove-selected">
										<i class="glyphicon glyphicon-arrow-left"></i>
									</button>
									<button type="button" class="btn db-btn removeall btn-default" title="Remove all" id="remove-all">
										<i class="glyphicon glyphicon-arrow-left"></i> 
										<i class="glyphicon glyphicon-arrow-left"></i>
									</button>
								</div>
								<div class="box2 col-sm-6">
									<div class="box_r" style="width: 100%;" id="has_select_userList">
									</div>
								</div>
								
							</div>
						</div>
						<div class="space-8"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right" for="add-consume-description"> 描述：</label>
							<div class="col-sm-5">
								<textarea class="form-control"  name="description" id="add-consume-description"
								 placeholder="描述" style="height: 99px;"></textarea>
							</div>
						</div>
						<div class="space-8"></div>
						<div class="form-group">
							<label class="col-lg-3 control-label no-padding-right"
								for="previewImg"> 账单图片：</label>
							<div class="col-sm-4">
								<div id="preview">
									<img id="imghead" border="0" src="${basePath}/static/imgs/photo_icon.png"
										width="90" height="90" onclick="$('#previewImg').click();">
								</div>
								<input type="file" name="checkImgs" onchange="previewImage(this)"
									style="display: none;" id="previewImg" accept="image/png, image/jpeg, image/gif, image/jpg">
							</div>
						</div>
						<div class="space-24"></div>
						<div class="col-lg-6 col-lg-offset-5">
							<button type="button" class="btn btn-default" id="reset_addConsumeInfo" data-dismiss="modal">重置</button>
							<button type="button" class="btn btn-primary" id="submit_addConsumeInfo">确定</button>
						</div>
					</form>
					
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
</div>
<!-- /.main-content -->
</@override> 
<@override name="footer"> 
<#include "/inc/include-easyUI-js.html"/>
<script src="${basePath}/static/ace/assets/js/spinbox.min.js"></script>
<script src="${basePath}/static/ace/assets/js/ace-elements.min.js"></script>
<script src="${basePath}/static/js/orso.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
		$.ajax({
			type:"get",
			dataType : "json",
			url : "${basePath}/admin/sys/user/getUserComboList?userId=0",	
			success : function(data) {
				if(data){
					var nowUserId = '${activeUser.id }';
					data.forEach(function(combo){
						if(nowUserId != combo.value){
							$('#has_no_select_userList').append("<li value='"+combo.value+"' text='"+combo.text+"'>"+combo.text+"</li>");							
						}
					});
				
					var spinner ="<span style='width: 47%;float: left;'>${activeUser.userName }</span><input type='text' class='weight-spinner' />";
					var html = "<li value='${activeUser.id }' text='${activeUser.userName }'>"+spinner+"</li>";
					$('#has_select_userList').append(html);
					$('.weight-spinner').each(function(){
						$(this).ace_spinner({value:0,min:0,max:10000,step:1, on_sides: true, icon_up:'ace-icon fa fa-plus bigger-110', icon_down:'ace-icon fa fa-minus bigger-110', btn_up_class:'btn-success' , btn_down_class:'btn-danger'});		
					})
					
					$("#select_consumeUser_box").orso({
						boxl:"#has_no_select_userList",//左边大盒子
						boxr:"#has_select_userList",//右边大盒子
						boxlrX:"li",//移动小盒子
						boxon:"on",//点击添加属性
						idclass:true,//添加的属性是否为class//true=class; false=id;
						boxlan:"#remove-selected",//单个向左移动按钮
						boxran:"#move-selected",//单个向右移动按钮
						boxalllan:"#remove-all",//批量向左移动按钮
						boxallran:"#move-all",//批量向右移动按钮
					});
				}
			}
		});
	});
</script>
<script type="text/javascript">
$(function () {
    $("#add-consume-consumeItemId").combobox({
	    url:'${basePath}/admin/consumeItem/getConsumeItemComboList',
	    valueField:'value',
	    textField:'text',
	});
	
    $('#reset_addConsumeInfo').click(function(){
	    $('#addConsumeInfoForm').data('bootstrapValidator').resetForm(true);
	    $("#add-consume-consumeItemId").combobox('clear');	
		$('#preview').empty();
		$('#preview').html('<img id="imghead" border="0" src="static/imgs/photo_icon.png" width="90" height="90" onclick="$(\'#previewImg\').click();">');    	
    })

	$('#submit_addConsumeInfo').click(function(){
		var consumeItemId = $("#add-consume-consumeItemId").combobox('getValue');	
		if(!consumeItemId){
			top.alertMsg('错误', '请选择消费项目！');
			return false;
		}
		
		var f = $('#addConsumeInfoForm');
		f.data('bootstrapValidator').validate();
		var isValid = f.data('bootstrapValidator').isValid();
		if(!isValid){
			return false;
		}
		
		var consumeMoney = 0;
		var every_consumeMoney = [];
		var reg = /^\d+(?:\.\d{1,2})?$/;
		var flag = false;
		$('#has_select_userList li').each(function(){
			var text = $(this).val();
			var strValue = $(this).find('.weight-spinner').val();
			if(!reg.test(strValue)){
				flag = true;
			}
			var value = parseFloat(strValue);
			consumeMoney += value;
			every_consumeMoney.push(text + '/' + value);
			
		})
		
		var count_consumeMoney = parseFloat($('#add-consume-consumeMoney').val());
		if(flag){
			top.alertMsg('错误', '消费金额格式不对！');
			return false;
		}else if(every_consumeMoney.length == 0){
			top.alertMsg('错误', '请选择消费人员！');
			return false;
		}else if(consumeMoney !=0 && consumeMoney != count_consumeMoney){
   			top.alertMsg('错误', '消费总额不对！');
			return false;
		}
		
		$('#add-consume-consumeUserIds').val(every_consumeMoney.join(","));
		
		var toUrl='${basePath}/admin/consumeRecord/create';
		var f = $('#addConsumeInfoForm');
			f.form('submit', {
			    url: toUrl,
			    onsubmit: function () {
			        var flag = $(this).form('validate');
			        if (flag) {
			            top.showProcess(true, '温馨提示', '正在提交数据...');
			        }
			        return flag;
			    },
			    success: function (data) {
			        var map = $.parseJSON(data);
			        if (map.success) {
			        	window.location.href='${basePath}/admin/consumeRecord/everyConsume/index'
			        } else {
			        	top.alertMsg('错误', map.msg);
			        }
			    },
			    onLoadError: function () {
			        top.showProcess(false);
			        top.$.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
			    }
			});
	});
});
</script>
<script type="text/javascript">
	$(function() {
		$('#addConsumeInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				consumeItemId : {
					message : '消费项目不能为空',
					validators : {
						notEmpty : {
							message : '消费项目不能为空'
						},
					}
				},
				consumeMoney : {
					validators : {
						notEmpty : {
							message : '消费金额不能为空'
						},
						numeric : {
							message : '消费金额只能数字'
						},
						regexp: {
	                        regexp: /^\d{0,8}\.{0,1}(\d{1,2})?$/,
	                        message: '小数点不能超过两位'
	                    }
					}
				},
				description : {
					
				}
			}
		});
	});
</script>
<!-- 预览图片 -->
<script type="text/javascript">
//编辑时
function edit_previewImage(file) {
	var MAXWIDTH = 90;
	var MAXHEIGHT = 90;
	var div = document.getElementById('edit_preview');
	if (file.files && file.files[0]) {
		div.innerHTML = '<img id=edit_imghead onclick=$("#edit_previewImg").click()>';
		var img = document.getElementById('edit_imghead');
		img.onload = function() {
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
					img.offsetWidth, img.offsetHeight);
			img.width = rect.width;
			img.height = rect.height;
			//         img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top + 'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			img.src = evt.target.result;
		}
		reader.readAsDataURL(file.files[0]);
	} else //兼容IE
	{
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=edit_imghead>';
		var img = document.getElementById('edit_imghead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
				img.offsetHeight);
		status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width
				+ ',' + rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}
//创建时
//图片上传预览    IE是用了滤镜。
function previewImage(file) {
	var MAXWIDTH = 90;
	var MAXHEIGHT = 90;
	var div = document.getElementById('preview');
	if (file.files && file.files[0]) {
		div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
		var img = document.getElementById('imghead');
		img.onload = function() {
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
					img.offsetWidth, img.offsetHeight);
			img.width = rect.width;
			img.height = rect.height;
			//         img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top + 'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			img.src = evt.target.result;
		}
		reader.readAsDataURL(file.files[0]);
	} else //兼容IE
	{
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=imghead>';
		var img = document.getElementById('imghead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
				img.offsetHeight);
		status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width
				+ ',' + rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}

function clacImgZoomParam(maxWidth, maxHeight, width, height) {
	var param = {
		top : 0,
		left : 0,
		width : width,
		height : height
	};
	if (width > maxWidth || height > maxHeight) {
		rateWidth = width / maxWidth;
		rateHeight = height / maxHeight;

		if (rateWidth > rateHeight) {
			param.width = maxWidth;
			param.height = Math.round(height / rateWidth);
		} else {
			param.width = Math.round(width / rateHeight);
			param.height = maxHeight;
		}
	}
	param.left = Math.round((maxWidth - param.width) / 2);
	param.top = Math.round((maxHeight - param.height) / 2);
	return param;
}
</script>
</@override> 
<@extends name="/layouts/admin-home.html"/>
